<template>
  <footer class="footer">
    <span class="todo-count">剩余<strong>{{count}}</strong></span>
    <!-- 6.0点击谁谁有边框 
          6.2 用户点击要切换isSel里保存的值
          @click="isSel='all'"-->
    <ul class="filters" @click="fahterFn">
      <li>
        <a :class="{selected: isSel==='all'}" href="javascript:;" @click="all">全部</a>
      </li>
      <li>
        <a :class="{selected: isSel==='no'}" href="javascript:;" @click="no">未完成</a>
      </li>
      <li>
        <a href="javascript:;" :class="{selected: isSel==='yes'}" @click="yes">已完成</a>
      </li>
    </ul>
    <button class="clear-completed" @click="clear()">清除已完成</button>
  </footer>
</template>

<script>
export default {
  // 5.0 props定义--这是父页面(:arr="list")传递给子页面的数组
props:['arr'],
// 5.1 计算属性 - 任务数量
//方法二：直接在插入值写{{this.arr.length}}
computed:{
  count(){
    return this.arr.length
  }
},
//6.目标：点击谁，谁有边框
//6.0 定义变量区分isSel
//6.1 设置动态class,希望一进入页面就是all边框亮

data(){
  return{
    isSel:'all'//– 定义isSel – 值为全部-all, 已完成-yes, 未完成-no其中一种
  }
},

methods:{
  //6.3:子传父，把类型isSel传到App.vue--切换页面需要TodoFooter页面需要影响TodoMain页面
//两个没有组件通信也可以(子传父，父传子)
//6.3.1 首先子传父--父页面创建一个自定义事件
  //6.3.2fahterFn()是a的点击事件触发父级--利用是事件委托
  fahterFn(){
    this.$emit('changeType',this.isSel)
  },
  all(){
    this.isSel="all"
  },
  yes(){
    this.isSel="yes"
  },
  no(){
  this.isSel="no"
  },
  //7.目标：清空已完成事件-点击事件
  //7.0.子传父-App.vue-一个清空方法
  clear(){
   this.$emit("clear")
  }
}
}
</script>